<template>
   <div>
    <el-col :span="22" :offset="2">
       <div class="grid-content bg-purple-dark" style="margin-top: 40px;margin-right: 20px;text-align: left">
          <h3 style="margin-top: 30px;color: #8c939d;display: inline-block;margin-right: 390px;margin-bottom: 20px">我的会议申请情况</h3>
          <el-select v-model="value" placeholder="请选择" id="select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
         &nbsp;
          <el-button type="success" @click="submit">搜索</el-button>
        </div>
      <div class="grid-content bg-purple-light">
        <el-table
          height="400"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="start"
            label="开始时间"
            width="180"
          >
             <template slot-scope="scope">
                {{ scope.row.start|dataFMT('YYYY-MM-DD HH:mm:ss') }}
              </template>
          </el-table-column>
          <el-table-column
            prop="end"
            width="180"
            label="结束时间">
              <template slot-scope="scope">
                {{ scope.row.end|dataFMT('YYYY-MM-DD HH:mm:ss') }}
              </template>
          </el-table-column>
          <el-table-column
            prop="part"
            width="120"
            label="所属部门">
          </el-table-column>
          <el-table-column
            prop="room"
            width="100"
            label="会议室号">
          </el-table-column>
          <el-table-column
            prop="checker"
            label="审核人">
          </el-table-column>
          <el-table-column
            v-if="is_show===3"
            prop="result"
            label="失败描述">
          </el-table-column>
          <el-table-column label="操作" v-if="is_show!==2">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="openDelete(scope.$index, scope.row)">删除审核
              </el-button>
              <br>
              <br>
              <el-button
                size="mini"
                type="primary"
                v-if="is_show===1"
                @click="handleDetail(scope.$index, scope.row)">提醒审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="警告"
          :visible.sync="dialogVisible"
          width="30%"
          >
          <span style="color: red">确定永久删除此数据吗？</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleDelete">确 定</el-button>
  </span>
        </el-dialog>
      </div>
      <div class="pagenation">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
    </el-col>

  </div>
</template>

<script>
  export default {
    name: 'ManageConferenceView',
      data () {
      return {
        current_page:1,
        dialogVisible: false,
        row: '',
        is_show: 1,//控制失败描述的显示
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        options: [{
          value: 1,
          label: '未审核'
        }, {
          value: 2,
          label: '审核通过'
        },
          {
            value: 3,
            label: '审核不通过'
          }
        ],
        value: 1,
        tableData: []
      }
    },
    mounted () {
      this.get_evection()
    },
    methods: {
      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/applyconference/?type=${2}&page=${page}&condition=${this.value}`,
          method: 'get'
        }).then(res => {
          this.is_show = this.value
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },
      submit () {
        this.tableData = []
        this.get_evection()
      },
      handleDetail (index, row) {

      },
      handleDelete () {
           var type = this.value//拿到用户删除时，查看的是什么审核结果
            this.$axios({
              url: this.$settings.base_url + `/user/applyconference/?id=${this.row.id}`,
              method: 'delete'
            }).then(res => {
              if (res.data.code === 100) {
                this.$message.success('删除会议申请成功')
                this.value = type
                this.dialogVisible=false
                this.get_evection(this.curren_page)
              } else {
                this.$message.error(`操作失败，${res.data.error}`)
              }
            })
      },
      openDelete (index, row) {
        this.dialogVisible = true
        this.row = row
      },

      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
      },
      currentchange (value) {
        this.curren_page=value
        this.get_evection(value)

      },
    }
  }
</script>

<style scoped>
 #select {
    text-align: left;
    margin-top: 50px;

  }
</style>
